<script setup>
import {inject, reactive, ref} from "vue";
import {
    Bell,
    ChatDotSquare, Check, Collection,
    Document, Files,
    Location, Lock, Monitor,
    Notification, Position,
    School, Search, Setting,
    Umbrella, User
} from "@element-plus/icons-vue";
import LightCard from "@/components/LightCard.vue";
import UserInfo from "@/components/UserInfo.vue";
import {getDeleteAllNotification, getDeleteNotification, getNotificationList} from "@/api/user";


const loading = inject('userLoading')
const notification = ref([])

const searchInput = reactive({
    type: '1',
    text: ''
})

const loadNotification =
        () => getNotificationList(data => notification.value = data)
loadNotification()

function confirmNotification(id, url) {
    getDeleteNotification(id, () => {
        loadNotification()
        window.open(url)
    })
}

function deleteAllNotification() {
    getDeleteAllNotification(loadNotification)
}
</script>
<template>
    <div class="main-content" v-loading="loading" element-loading-text="Loading...">
        <el-container style="height: 100%" v-if="!loading">
            <el-header class="main-content-header">
                <el-image class="logo" src="https://element-plus.org/images/element-plus-logo.svg"></el-image>
                <div style="flex: 1; padding: 0 20px; text-align: center">
                    <el-input v-model="searchInput.text" style="width: 100%; max-width: 500px" placeholder="Search...">
                        <template #prefix>
                            <el-icon>
                                <Search/>
                            </el-icon>
                        </template>
                        <template #append>
                            <el-select style="width: 100px" v-model="searchInput.type">
                                <el-option value="1" label="帖子广场"/>
                                <el-option value="2" label="表白墙"/>
                                <el-option value="3" label="通知"/>
                            </el-select>
                        </template>
                    </el-input>
                </div>
                <user-info>
                    <el-popover placement="bottom" :width="350" trigger="click">
                        <template #reference>
                            <el-badge is-dot :hidden="!notification.length">
                                <div class="notification">
                                    <el-icon>
                                        <Bell/>
                                    </el-icon>
                                    <div style="font-size: 10px">消息</div>
                                </div>
                            </el-badge>
                        </template>
                        <el-empty :image-size="80" description="暂时没有未读消息哦~" v-if="!notification.length"/>
                        <el-scrollbar :max-height="500" v-else>
                            <light-card v-for="item in notification" class="notification-item"
                                        @click="confirmNotification(item.id, item.url)">
                                <div>
                                    <el-tag size="small" :type="item.type">消息</el-tag>&nbsp;
                                    <span style="font-weight: bold">{{ item.title }}</span>
                                </div>
                                <el-divider style="margin: 7px 0 3px 0"/>
                                <div style="font-size: 13px;color: grey">
                                    {{ item.content }}
                                </div>
                            </light-card>
                        </el-scrollbar>
                        <div style="margin-top: 10px">
                            <el-button size="small" type="info" :icon="Check" @click="deleteAllNotification"
                                       style="width: 100%" plain>清除全部未读消息
                            </el-button>
                        </div>
                    </el-popover>
                </user-info>
            </el-header>
            <el-container>
                <el-aside width="230px">
                    <el-scrollbar style="height: calc(100vh - 55px)">
                        <el-menu
                                router
                                :default-active="$route.path"
                                :default-openeds="['1']"
                                style="min-height: calc(100vh - 55px)">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <Location/>
                                    </el-icon>
                                    <span><b>校园论坛</b></span>
                                </template>
                                <el-menu-item index="/index">
                                    <template #title>
                                        <el-icon>
                                            <ChatDotSquare/>
                                        </el-icon>
                                        帖子广场
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Bell/>
                                        </el-icon>
                                        失物招领
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Umbrella/>
                                        </el-icon>
                                        表白墙
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Notification/>
                                        </el-icon>
                                        校园活动
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <School/>
                                        </el-icon>
                                        <span>广告集合</span>
                                        <el-tag style="margin-left: 10px;" size="small">广告</el-tag>
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Position/>
                                    </el-icon>
                                    <span><b>探索与发现</b></span>
                                </template>
                                <el-menu-item index="2-1">
                                    <template #title>
                                        <el-icon>
                                            <Document/>
                                        </el-icon>
                                        成绩查询
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Files/>
                                        </el-icon>
                                        课程表
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Monitor/>
                                        </el-icon>
                                        教务管理
                                    </template>
                                </el-menu-item>
                                <el-menu-item>
                                    <template #title>
                                        <el-icon>
                                            <Collection/>
                                        </el-icon>
                                        图书馆
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <Setting/>
                                    </el-icon>
                                    <span><b>设置</b></span>
                                </template>
                                <el-menu-item index="/index/user-setting">
                                    <template #title>
                                        <el-icon>
                                            <User/>
                                        </el-icon>
                                        个人信息
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="/index/privacy-setting">
                                    <template #title>
                                        <el-icon>
                                            <Lock/>
                                        </el-icon>
                                        账号安全
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-main class="main-content-page">
                    <el-scrollbar style="height: calc(100vh - 55px)">
                        <router-view v-slot="{ Component }">
                            <transition name="el-fade-in" mode="out-in">
                                <component :is="Component" style="height: 100%"/>
                            </transition>
                        </router-view>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<style lang="less" scoped>
.notification-item {
    transition: .3s;

    &:hover {
        cursor: pointer;
        opacity: 0.7;
    }
}

.notification {
    font-size: 22px;
    line-height: 14px;
    text-align: center;
    transition: color .3s;

    &:hover {
        color: grey;
        cursor: pointer;
    }
}


.main-content {
    height: 100vh;
    width: 100vw;
}

.main-content-header {
    border-bottom: solid 1px var(--el-border-color);
    height: 55px;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .logo {
        height: 32px;
    }

    .user-info {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .el-avatar:hover {
            cursor: pointer;
        }

        .profile {
            text-align: right;
            margin-right: 20px;

            :first-child {
                font-size: 18px;
                font-weight: bold;
                line-height: 20px;
            }

            :last-child {
                font-size: 13px;
                color: gray;
            }
        }
    }
}

.main-content-page {
    padding: 0;
    background-color: #ecedee;
}

.dark .main-content-page {
    background-color: #1c1d1e;
}
</style>
